<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>出错啦</title>
    <style>
        .full-screen {
            background-color: rgb(51, 51, 51);
            width: 100vw;
            height: 100vh;
            color: white;
            font-family: 'Arial Black';
            text-align: center;
        }

        .container {
            padding-top: 4em;
            width: 50%;
            display: block;
            margin: 0 auto;
        }

        .error-num {
            font-size: 8em;
        }

        .eye {
            background: #fff;
            border-radius: 50%;
            display: inline-block;
            height: 100px;
            position: relative;
            width: 100px;
            &::after {
             background: #000;
             border-radius: 50%;
             bottom: 56.1px;
             content: ' ';
             height: 33px;
             position: absolute;
             right: 33px;
             width: 33px;
         }
        }

        .italic {
            font-style: italic;
        }

        p {
            margin-bottom: 4em;
        }

        a {
            color: white;
            text-decoration: none;
            text-transform: uppercase;
            &:hover {
             color: lightgray;
            }
        }
    </style>
</head>
<body>
<div class="full-screen">
    <div class='container'>
        <span class="error-num">5</span>
        <div class='eye'></div>
        <div class='eye'></div>

        <p class="sub-text">Oh eyeballs! Something went wrong. We're <span class="italic">looking</span> to see what happened.</p>
        <a href="">Go back</a>
    </div>
</div>
<script type="text/javascript" th:src="@{/static/js/jquery.min.js}" ></script>
<script>
    $(".full-screen").mousemove(function(event) {
        var eye = $(".eye");
        var x = (eye.offset().left) + (eye.width() / 2);
        var y = (eye.offset().top) + (eye.height() / 2);
        var rad = Math.atan2(event.pageX - x, event.pageY - y);
        var rot = (rad * (180 / Math.PI) * -1) + 180;
        eye.css({
            '-webkit-transform': 'rotate(' + rot + 'deg)',
            '-moz-transform': 'rotate(' + rot + 'deg)',
            '-ms-transform': 'rotate(' + rot + 'deg)',
            'transform': 'rotate(' + rot + 'deg)'
        });
    });

</script>
</body>
</html>